<template>
    <div id="box">
            <div id="glass">
                 <span id="wenxuan" @click="btnClick">‹</span> 
                 <input type="text" id="inp">
                 <span>搜索</span>
            </div>
            <div id="fenlei">
                <span id="w1">全部分类</span>
                <span id="w2">价格◆</span>
                <span id="w3">销量</span>
                <span id="w4">筛选 ▼</span>
            </div>
           <!--<Divider></Divider>-->
            <div v-for="f in good" id="suanran">
                
                 <router-link :to="f._id">
                <img :src="f.img[0]">
                </router-link>
                <router-link :to="f._id">
                <div id="xuan">
                <p class="xq">书名：{{f.name}}</p>

                <p class="xq">作者：{{f.author}}</p>
 
                <p class="xq">价格：<span id="qian">￥{{f.price}}</span>
                <div id="faa">
                <span id="che"  class="fa fa-shopping-cart" @click="add"></span></p>
                </div>
                </div>
                
                </router-link>
                
                <!--<span id="che"  class="fa fa-shopping-cart" @click="add"></span></p>-->
            </div>
            
    </div>
</template>

<script>
    import {Divider} from 'vux'
       import {mapState} from 'vuex'
    import Xiangqing from '@/pages/Xiangqing.vue'
export default {
    components:{
        Xiangqing,
        // Divider
    },
    computed:{
        ...mapState([
            "islogin"
        ])
    },
    data:function(){
        return{
            good:[],
            wares:[],
          
        }
    },
   
    mounted:function(){
        var qq = {
            type:this.$route.query.type
        }
        this.http.post("/api/users/center",qq)
        .then(res=>{
            this.good = res.data.xiangqing
            // console.log(this.good);
        })
       
    },


    methods:{
        btnClick:function(){
            location.href="#/Paging"
      
    },
    // add:function(){
    //         location.href="#/Shopping"
    // }
    //  详情列表请求
        // xiangqing:function(){
        //     this.http.post("api/users/xiangqing",{id:this.id})
        //     .then(res=>{
        //     //    console.log(res.data.goods) 
        //         this.wares = res.data.goods
        //     })
        // },
    // 添加购物车请求
    //   add:function(e){
    //         if(this.islogin){

    //         var gouwu = {
    //             _id:this.wares.goodid,
    //             img:this.wares.img,
    //             name:this.wares.name,
    //             price:this.wares.price,
    //             author:this.wares.author,
    //             press:this.wares.press,
    //         }
    //         console.log(gouwu)
    //         this.http.post("api/users/trade",gouwu)
    //         .then(res=>{
    //             alert("添加购物车成功")
    //         })
    //     }else{
    //         alert("您还没登录 请先登录")
    //     }

    // },

},

          

      
}
</script>

<style scoped>
    #box{
        /*overflow: hidden;*/
        overflow-x: hidden;
        width: 100%;
        height: calc(100vh - 70px);
        /*overflow: scroll;*/
        background-color: white;
        z-index: 10;
    }
    #glass{
        position: fixed;
        width: 100%;
        height: 40px;
        /*border: solid 1px black;*/
          background-color: white;
    }
     #wenxuan{
        cursor: pointer;
        color: red;
        font-size: 30px;
        padding-left: 10px;
       
    /*float: left;*/
     }
     #inp{
         margin: 10px;
         width: 70%;
         height: 25px;
     }
     #fenlei{
         border-bottom: solid 1px #cccccc;
           cursor: pointer;
         text-align: center;
         display: flex;
         width: 100%;
         height: 35px;
         /*border: solid 1px black;*/
         line-height: 35px;
         /*padding-left: 15px;*/
         font-size: 12px;
         padding-top: 10vw;
         
     }
     #w1{
         width: 30%;
     }
     #w2{
         width: 20%;
     }
     #w3{
         width: 20%;
     }
     #w4{
         width: 20%;
     }
     #suanran{
         width: 100vw;
         height: 20vh;
         border-bottom: solid 1px #eeeeee;
         margin: 2vw;
         display: flex;
     }
    img{
         width: 35%;
         height: 30vw;
         width: 30vw;
     }
     .xq{
         /*margin: 8px;*/
         margin: 0;
         padding-top: 8px;
     }
     #qian{
         color: red;
     }

     #xuan{
         width: 60%;
         margin: 2vw;
         font-size: 14px;
         color: #333;
     }
     #che{
         /*width: 30%;*/
         cursor: pointer;
         font-size: 20px;
        color: red;
         /*float: right;*/
         padding-right: 8px;
         border: solid 1px #eeeeee;
     }
     a{
         margin: 5px;
         /*width: 40vw;*/
         /*width: 50%;*/
         text-decoration:none;
     }
     #faa{
        width: 60vw;
        margin: 8px;
        padding-left: 40vw;
        padding-bottom: 30px;
     }

</style>